使用js对表格进行添加数据、刪除数据批量删除数据

最新推荐文章于 2023-12-29 14:42:24 发布

java.小小白

最新推荐文章于 2023-12-29 14:42:24 发布

阅读量2.5k

点赞数 6

分类专栏：前端文章标签： html js html5 javascript

男孩@qq1603853843

本文链接：https://blog.csdn.net/weixin_47427198/article/details/112918393

版权

前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

一选中多个数据进行删除&&添加数据
html页面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>单选多选</title>
		<!--做一些修饰,自行定义-->
		<style>
			tr {
				text-align: center;
			}
			
			tr td:first-child {
				width: 50px;
			}
		</style>
	</head>

	<body>
		<!--<form>-->
		<!--先创建初始的数据-->
		<table border="1" width="400px" align="center" id="tab_a">
			<tr>
				<td colspan="4">
					<!--添加按钮-->
					<button onclick="addData()">添加</button>
					<!--批量删除按钮-->
					<button onclick="deleteData()">批量删除</button>
				</td>
			</tr>
			<tr>
				<th>
					<!--全选按钮-->
					<input type="checkbox" name="checkAll" id="checkAll" onchange="checkedAll()" />
				</th>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td></td>
				<td>六一</td>
				<td>24</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td></td>
				<td>张二</td>
				<td>24</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td></td>
				<td>李三</td>
				<td>21</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td></td>
				<td>王四</td>
				<td>31</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td></td>
				<td>小六</td>
				<td>27</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check"></td>
				<td></td>
				<td>二七</td>
				<td>22</td>
			</tr>
		</table>
		<!--</form>-->
	</body>
</thml>

js代码

	<script>
		//获取全选按钮
		var checkAll = document.getElementById("checkAll");
		//获取所有的单选项
		var checkArray = document.getElementsByName("check");
		//获取表格
		var tab_a = document.getElementById("tab_a").children[0];
		//tab_a.rows(获取有多少行)
		var trArray = tab_a.rows;

		function ids() {
			//定义编号
			let id = 0;
			//除去标题,给每一行添加上id编号
			for(let i = 2; i < trArray.length; i++) {
				trArray[i].cells[1].innerText = ++id;
			}
		}

		//渲染每一行的id编号
		ids();
		//全选按钮
		function checkedAll() {
			//全选
			if(checkAll.checked) {
				for(let i = 0; i < checkArray.length; i++) {
					checkArray[i].checked = true;
				}
			}
			//全不选
			if(!checkAll.checked) {
				for(let i = 0; i < checkArray.length; i++) {
					checkArray[i].checked = false;
				}
			}
		}
		//添加数据
		function addData() {
			//获取表格最后一行里面的数据   .cells(获取所有的列)
			let tdArray = trArray[trArray.length - 1].cells;
			//获取最后一行里面的编号,那么下一行的编号就可以在他的基础上加1 
			let idNew = tdArray[1].outerText;
			//当所有的数据被清空,tdArray[1].outerText就不在是数字,手动修改
			if(isNaN(idNew)) {
				idNew = 0;
			}
			//获取输入的信息
			let name = prompt("请输入姓名");
			let age = prompt("请输入年龄");
			//创建tr标签
			let trTab = document.createElement("tr");

			for(let i = 0; i < tdArray.length; i++) {
				//创建td标签
				let tdTab = document.createElement("td");
				//向行内添加单元格
				trTab.appendChild(tdTab);
			}
			//获取所有的td  tdA为td的集合
			let tdA = trTab.cells;

			//创建选择框 给上type 和 name属性
			let inp = document.createElement("input");
			inp.setAttribute("type", "checkbox");
			inp.setAttribute("name", "check");

			tdA[0].appendChild(inp);
			tdA[1].innerHTML = ++idNew; //编号加1
			tdA[2].innerHTML = name;
			tdA[3].innerHTML = age;
			//向表格内添加行
			tab_a.appendChild(trTab);
		}

//		//删除数据
//		function deleteData(){
//			//获取有多少行
//			let trArray1 = tab_a.rows;
//			//终止条件
//			if(trArray1.length == 2){
//				return ;
//			}
//			for (let i=2; i<trArray1.length; i++) {
				console.log(trArray[i].cells[0].children[0].checked);
//				//trArray[i].cells[0] 获取当前行的第一个td
//				//.children[0]获取td里面的第一个子标签,input
//				//.checked 获取是否被选中,选中返回true,未选中返回fasle
//				if(trArray1[i].cells[0].children[0].checked){
//					//当复选框被选中时删除tr
//					tab_a.removeChild(trArray1[i]);
//					//删除当前行,他的下一行移到了当前的位置,但是i++之后,不会再走到这一行
//					//使用i-- 在退回到这一行做一次判断
//					i--;
//				}
//			}
//			//删除完之后,多选框取消选定状态
//			if(checkAll.checked){
//				checkAll.checked = false;
//			}
//			ids();
//		}

		//删除数据
		function deleteData() {
			//循环所有的选项
			for(let i = 0; i < checkArray.length; i++) {
				//判断是否被选中
				if(checkArray[i].checked) {
					//当复选框被选中时进行删除

					//获取最高的节点
					let tbody = checkArray[i].parentNode.parentNode.parentNode;
					//获取被选中的这一行
					let tr = checkArray[i].parentNode.parentNode
					//进行删除
					tbody.removeChild(tr);
					//删除当前行,他的下一行移到了当前的位置,但是i++之后,不会再走到这一行
					//使用i-- 在退回到这一行做一次判断
					i--;
				}
			}
			//删除完之后,多选框取消选定状态
			if(checkAll.checked) {
				checkAll.checked = false;
			}
			ids();
		}
	</script>

效果图
在这里插入图片描述
二添加数据,单个删除数据
html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>添加信息</title>
		<!--做一些修饰,自行定义-->
		<style>
			*{
				margin: 10px auto;
				padding: 0px auto;
			}
			div{
				width: 800px;
				text-align: center;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div>
			<!--添加信息-->
			学号: <input type="text" name="id" id="id"/>
			姓名: <input type="text" name="name" id="name"/>
			年龄: <input type="text" name="age" id="age" />
			<br />
			<!--添加按钮-->
			<button onclick="addData()">添加信息</button>
			<p></p>
			<!--初始数据-->
			<table border="1" id="tab_a">
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>操作</th>
				</tr>
				<tr>
					<td>10000</td>
					<td>张三</td>
					<td>23</td>
					<!--删除按钮,只删除这一行-->
					<td><button onclick="deleteData(this)">删除</button></td>
				</tr>
			</table>
		</div>
	</body>
</html>

js代码

	<script>
		
		function addData(){
			//获取学号
			let id = document.getElementById("id").value;
			//获取姓名
			let name = document.getElementById("name").value;
			//获取年龄
			let age = document.getElementById("age").value;
			
			//判断信息不为空值
			if(id==""||name==""||age==""){
				alert("请不要填写空信息");
				return ;
			}
			
			//获取表格
			let tab_a = document.getElementById("tab_a");
			//获取表格内部表
			let tbody = tab_a.children[0];
			//根据标题可获取有多少列
			let cellsLen = tbody.rows[0].cells.length;
			//创建tr标签
			let tr = document.createElement("tr");
			
			//依次创建td标签
			for(let i=0; i<cellsLen; i++){
				//创建td标签
				let td = document.createElement("td");
				//将td标签添加到tr里
				tr.appendChild(td);
			}
			//创建一个按钮
			let but = document.createElement("button");
			//创建文本内容
			let textA = document.createTextNode("删除");
			//将文本内容添加到按钮
			but.appendChild(textA);
			//给按钮添加属性
			but.setAttribute("onclick","deleteData(this)");
			//给每个td赋值
			tr.cells[0].innerHTML = id;
			tr.cells[1].innerHTML = name;
			tr.cells[2].innerHTML = age;
			//添加删除按钮
			tr.cells[3].appendChild(but);
			//添加到table里
			tbody.appendChild(tr);
		}
		
		function deleteData(obj){
			//parentNode返回父级节点
			//obj.parentNode.parentNode.parentNode.removeChild 返回到table节点并进行删除
			//obj.parentNode.parentNode 返回到tr节点
			obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
		}

效果图
在这里插入图片描述

java.小小白

关注

6
点赞
踩
27

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用js对表格进行添加数据、刪除数据批量删除数据

一选中多个数据进行删除&&添加数据html页面<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>单选多选</title>  <style> tr { text-align: center; } tr td:first-child {
复制链接

扫一扫